<form class="searchbox">
    <div class="form-group row">
        <label for="serviceSelect" class="col-sm-2 col-form-label">Service</label>
        <div class="col-sm-5">
            <select class="form-control" #serviceSelect>
                        <option *ngFor="let o of zipkin.services" [value]="o">{{o}}</option>
                        </select>
        </div>
    </div>

    <div class="form-group row">
        <label for="timeSelection" class="col-sm-2 col-form-label">Time range</label>
        <div class="col-sm-2">
            <select class="form-control" #timeSelection (change)="updateTimeRange(timeSelection.value)">
                        <option value="15">Last 15 minutes</option>
                        <option value="30">Last 30 minutes</option>
                        <option value="60">Last hour</option>
                        <option value="120">Last 2 hours</option>
                        <option value="480">Last 8 hours</option>
                        <option value="720">Last 12 hours</option>
                        <option value="1440">Last day</option>
                        <option value="custom">User defined</option>
                    </select>
        </div>
        <label for="durationInput" class="col-sm-1 col-form-label">Duration</label>
        <div class="col-sm-2">
            <div class="input-group ">
                <div class="input-group-addon">>=</div>
                <input type="number" class="form-control" #durationInput placeholder="" [value]="minDuration">
                <div class="input-group-addon">μs</div>
            </div>
        </div>

        <label for="limitSelect" class="col-sm-1 col-form-label">Limit</label>
        <div class="col-sm-2">
            <select class="form-control" #limitSelect>
                        <option value="10">10 traces</option>
                        <option value="50">50 traces</option>
                        <option value="100">100 traces</option>
                        </select>
        </div>
        <button type="submit" class="btn btn-primary" (click)="find(serviceSelect.value, timeSelection.value, durationInput.value , limitSelect.value, startDateInput.value, startTimeInput.value, endDateInput.value, endTimeInput.value)"><fa [name]="'search'"></fa> Find traces</button>
    </div>
    <div [hidden]="!customTime">
        <div class="form-group row">
            <label for="startDateInput" class="col-sm-2 col-form-label">From</label>
            <div class="col-sm-2">
                <input type="date" class="form-control" #startDateInput [value]="formatDate(startDate)">
            </div>

            <div class="col-sm-2">
                <input type="time" class="form-control" #startTimeInput [value]="formatTime(startDate)">
            </div>
        </div>

        <div class="form-group row">
            <label for="endDateInput" class="col-sm-2 col-form-label">To</label>
            <div class="col-sm-2">
                <input type="date" class="form-control" #endDateInput [value]="formatDate(endDate)">
            </div>

            <div class="col-sm-2">
                <input type="time" class="form-control" #endTimeInput [value]="formatTime(endDate)">
            </div>
        </div>
    </div>

</form>
<div [hidden]="zipkin.hasTraces()" class="bd-callout bd-callout-warning">
    <b>Please select the criteria for your trace lookup.</b>
</div>
